<extend name="Common:base" />
<block name="head">
	<script>

		window.webRoot = '__ROOT__/'; // /crm  
		window.indexUrl= '__CONTROLLER__';//IndexController
	</script>
  <style>
	.el-card__header {
	    padding: 15px 20px;
	    border-bottom: 1px solid #D3DCE6;
	    box-sizing: border-box;
	    background: #3fc3e2;
	    color: #ffffff;
	}
	#one .el-card__body{
		padding:22px;
	}
	.button_sty{
		width:25%;
		height:150px;
		border-radius:10px; 
		vertical-align:middle;
		font-size:22px;
	}
  .item{
  	margin-bottom:10px;
  }
	.el-badge__content.is-fixed {
	    top: 0px;
	    right: 0px;
	    position: absolute;
	    -ms-transform: translateY(-50%) translateX(100%);
	    transform: translateY(-50%) translateX(100%);
	}
	#two{
  	height:220px;
  	line-height:224px;
  	text-align:center; 
  	display: table-cell;
  	vertical-align:middle;
	}
	#head_img{
		float:left;
		width:200px;
		height:200px;
		border-radius:100%; 
		vertical-align:middle;
	}
	#info{
  	float:left;
  	margin-left:30px;
  	text-align:left;
  	width:200px;
  	border-left:1px solid #e2e2e2;
  	line-height:180%	
	}
	@media screen and (max-width:1700px){
		#head_img {
	    float: left;
	    width: 130px;
	    height: 130px;
	    border-radius: 100%;
	    vertical-align: middle;
		}
		#info {
	    float: left;
	    margin-left: 10px;
	    text-align: left;
	    width: 180px;
	    border-left: 1px solid #e2e2e2;
	    line-height: 120%;
		}
	}
  </style>

</block>
<block name="body">

<div id="app" class="container">
<div class="wrapp" v-show="show" style="display: none;">

	<el-row :gutter="20">
		<el-col :span="8">
			<el-card id="one" class="box-card">
			  <div slot="header" class="clearfix">
			    <span>个人信息</span>
			  </div>
			  <div id="two">
			  	<php>
						$userInfo = session('account')['userInfo'];
						$arr=M('user_info')->where(array('user_id'=>$userInfo['user_id']))->find(); 
						$arr['d_name']=M('department_basic')->where(array('id'=>$arr['department_id']))->getField('name');
						$arr['role_name']=M('rbac_role')->where(array('id'=>$arr['role_id']))->getField('name');
				  </php>
			  	<img id="head_img" src="__ROOT__{$arr['head']}" class="image" width="100%" height="100%">
				
			  	<div id="info">
			  		&nbsp;&nbsp;&nbsp;<span>姓名：{$arr['realname']}</span><br>
			  		&nbsp;&nbsp;&nbsp;<span>I  D：{$arr['user_id']}</span><br>
			  		&nbsp;&nbsp;&nbsp;<span>职位类型：{$arr['role_name']}</span><br>
			  		&nbsp;&nbsp;&nbsp;<span>单位：{$arr['d_name']}</span><br>
			  		&nbsp;&nbsp;&nbsp;<span>Q  Q：{$arr['qq']}</span><br>
			  		&nbsp;&nbsp;&nbsp;<span>电话：{$arr['phone']}</span><br>
			  		&nbsp;&nbsp;&nbsp;<span>地址：{$arr['address']|mb_substr=###,0,5}</span>
			  	</div>
			  </div>
			</el-card>
		</el-col>
		<el-col :span="16">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					审批管理
				</div>
				<div style="height:224px;line-height:224px;text-align:center;">
          <el-button class="button_sty" size="small" @click="approval" type="info">
            <el-badge :value="a" :max="99" class="item">
              <i class="el-icon-edit"></i>
            </el-badge>
            </br>
						我的审批
	          
          </el-button>
          <el-button class="button_sty" style="margin-left:80px;background:#F3AC3A;border-color:#F3AC3A;" size="small" @click="check" type="info">
            <el-badge :value="b" :max="99" class="item">
              <i class="el-icon-arrow-up"></i>
            </el-badge>
            </br>
            我的核查
          </el-button>
          <el-button class="button_sty" style="margin-left:80px;background:#DF31F3;border-color:#DF31F3;" size="small" @click="application" type="info">
            <el-badge :value="c" :max="99" class="item">
              <i class="el-icon-menu"></i>
            </el-badge>
            </br>
	          我的申请
          </el-button>
				</div>
			</el-card>
		</el-col>
	</el-row>




</div>
<div class="dialogWrapper" v-show="show" style="display: none">
  <!-- 显示系统公告内容 -->
  <include file="_showContent" />
  <!-- / 显示系统公告内容 -->
</div>
</div>
</block>
<block name="scripts">
<script src="__PUBLIC__/js/echarts.min.js"></script>
	<script>
	// page.getEchartsOption = "{:U('IndexData/echarts')}";
	// page.getSysReport = "{:U('IndexData/getSysReport')}";
	// page.getData2 = "{:U('IndexData/getData2')}";
	// page.getData3 = "{:U('IndexData/getData3')}";
	//console.log(VueHooks.prototype);
	
	function Student(name) {
	    this.name = name;
	}

	Student.prototype.hello = function () {
	    alert('Hello, ' + this.name + '!');
	};

	var m1 = new Student('1111');
	//m1.hello();
	// console.log(m1.__proto__);
	//console.log(Student.prototype);
	window.defaultOption.setVueHook('mounted', function(){
		var edom = document.getElementById('echarts');
		var myChart = echarts.init(document.getElementById('echarts'));
		var colors = ['#d14a61','#61a0a8','#675bba','#5793f3', '#d14a61'];
		var option = {
			    color: colors,
          title: {
	          text: '最近7天自锁数',
	          x:'center'
	        },
	        tooltip: {
	        	trigger: 'axis',
	          axisPointer: { // 坐标轴指示器，坐标轴触发有效
	            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
	        	}
	   		  },
	        legend: {
	        	data: ['自锁数'],
	          align: 'right',
	        	right: 10
	    		},
	   		  grid: {
	        	left: '3%',
	        	right: '4%',
	        	bottom: '3%',
	        	containLabel: true
	    		},
	   		  xAxis: {
	        	type: 'category',
	        	data: [],
	        	axisTick: {
              alignWithLabel: true
            }
	    		},
	    		yAxis: [{
	        	type: 'value',
	        	name: '自锁数/个',
	        	axisLabel: {
	            formatter: '{value}'
	        	},
            axisLine: {
              lineStyle: {
                color: colors[0]
              }
            },
	   		  }],
	        series: [{
	       	  name: '自锁数',
	       	  type: 'bar',
	        	data: []
	   		  }, {
	          name: '成交数',
	          type: 'bar',
	          data: []
	    		}]
	      }
	      // myChart.showLoading();
		  myChart.setOption(option);

		  edom.style.width="auto";
		// console.log('mounted charts');
		        
    window.onresize = myChart.resize;


    var w=document.body.scrollWidth;
  	if(w<1400){
  		var two=document.getElementById('two');
  		var th=document.getElementById('th');
  		two.style.textAlign='center';
        th.style.lineHeight='150%';
        th.style.marginRight="30px";
        th.style.textAlign='left';
  	}
    this.$http.get(page.getEchartsOption).then(function(response){
			// option.xAxis.data = response.body.date;
			// option.series = response.body.series;
			// console.log(response.body);
			myChart.setOption({
				xAxis:{data:response.body.date},
				series:response.body.series
			});
		}, function(response){
			this.$message.error("图表数据出错了");
		});

		this.$http.get(page.getSysReport).then(function(response){
			this.sysReport  = response.body;
		}, function(response){
			this.$message.error("业绩报表");
		});

		this.$http.get(page.getData2).then(function(response){
			this.data2  = response.body;
		}, function(response){
			this.$message.error("量化报表");
		});

		this.$http.get(page.getData3).then(function(response){
			this.data3  = response.body;
		}, function(response){
			this.$message.error("客户统计");
		});
		// setLocation()
		

		this.$http.get("{:U('setLocation')}").then(function(response){
			// this.data3  = response.body;
		});

	}).setDatas({
		NoticeType:{:json_encode($NoticeType)},
		a:{:json_encode($a)},
		b:{:json_encode($b)},
		c:{:json_encode($c)},
		contentDialog:false,
		noticeInfo:[],
		sysReport:[
				{
					date:'2016-12-01',
					zyj:'730',
					cjc:'0 / 0',
					xfc:'0.00 / 0.00',
					xfy:'1 / 0',
					sjc:'730.00 / 0.00',
					sjy:'0 / 0',
					
				},
				{
					date:'2016-12-02',
					zyj:'730',
					cjc:'0 / 0',
					xfc:'0.00 / 0.00',
					xfy:'1 / 0',
					sjc:'730.00 / 0.00',
					sjy:'0 / 0',
					
				}
				,
				{
					date:'2016-12-03',
					zyj:'730',
					cjc:'0 / 0',
					xfc:'0.00 / 0.00',
					xfy:'1 / 0',
					sjc:'730.00 / 0.00',
					sjy:'0 / 0',
					
				}
		],
		data3:[
				{
					date:'2016-01-01',
					sd:'1',
					gz:'2',
					tj:'0',
					xg:'4',
					xq:'1',
				},
				{
					date:'2016-01-02',
					sd:'1',
					gz:'2',
					tj:'0',
					xg:'4',
					xq:'1',
				},
				{
					date:'2016-01-03',
					sd:'1',
					gz:'2',
					tj:'0',
					xg:'4',
					xq:'1',
				},
				{
					date:'2016-01-04',
					sd:'1',
					gz:'2',
					tj:'0',
					xg:'4',
					xq:'1',
				}
		],
	  data2:[]
	}).setMethod('getType', function(type, field){
    return this[field][type];
  }).setMethod('showContent',function(row,event,column){
		this.contentDialog = true;
		this.noticeInfo = row;
  }).setMethod('approval',function(){
		parent.layui.use(['layer','tab'], function(){
		  var layer = parent.layui.layer
		  ,$ = parent.layui.jquery; 
		  tab = parent.layui.tab();
      tab.tabAdd({icon:"&#xe660;",title:"我的审批",href:"{:U('MyApproval/index')}"})
		});
  }).setMethod('check',function(){
		parent.layui.use(['layer','tab'], function(){
		  var layer = parent.layui.layer
		  ,$ = parent.layui.jquery; 
		  tab = parent.layui.tab();
      tab.tabAdd({icon:"&#xe615;",title:"我的核查",href:"{:U('MyCheck/index')}"})
		});
  }).setMethod('application',function(){
		parent.layui.use(['layer','tab'], function(){
		  var layer = parent.layui.layer
		  ,$ = parent.layui.jquery; 
		  tab = parent.layui.tab();
      tab.tabAdd({icon:"&#xe683;",title:"我的申请",href:"{:U('MyApplication/index')}"})
		});
  });
	</script>

</block>
